<template>
	<gui-page :customFooter="true"
		:footerSets="{height:100, zIndex:100, bg:'linear-gradient(to bottom, #F8F8F8,#F8F8F8)'}">
		<view class="gui-padding" slot="gBody">
			<view style="margin-top:38rpx;">
				<text class="gui-h5 gui-color-gray gui-bold">{{title}}</text>
			</view>
			<view style="margin-top:15rpx;">
				<gui-select-list v-if="lists.length >= 1" :items="lists" iconSize="42rpx" @change="change"
					type="checkbox" checkedType="ring" ref="selectList"></gui-select-list>
			</view>
		</view>
		<view slot="gFooter" v-if="lists.length >= 1"
			class="gui-padding gui-flex gui-rows gui-space-between gui-align-items-center"
			style="border-top:1px solid #E8E8E8;">
			<view class="footerBtns">
				<gui-select-list :items="selectBtn" iconSize="42rpx" @change="btnChange" type="checkbox"
					checkedType="ring"></gui-select-list>
			</view>
			<text class="footerBtns gui-icons gui-block-text gui-text gui-text-right" @tap="tijiao">&#xe625; 提交</text>
		</view>


	</gui-page>
</template>

<script>
	export default {
		data() {
			return {
				tag: '',
				title: '多选列表',
				choose_val: [],
				// 选择列表
				lists: [],
				// 底部选择按钮
				selectBtn: [{
					title: "全选",
					checked: false
				}, ],
			}
		},
		onLoad: function(query) {
			this.$globalMethod();
			if (typeof query.tag != 'undefined') {
				this.tag = query.tag;
				if (this.tag == 'weekend') {
					uni.setNavigationBarTitle({
						title: '周末排班时间设置'
					});

					this.title = '周末排班时间设置';
				} else {
					uni.setNavigationBarTitle({
						title: '工作日排班时间设置'
					});

					this.title = '工作日排班时间设置';
				}

				this.get_paiban_list();
			}
		},
		methods: {
			get_paiban_list() {
				let _this = this;
				_this.graceJS.get(_this.serverUrl + '/api.teacher/paiban_list', {
						tag: _this.tag
					}, {
						token: _this.token
					}, (res) => {
						if (res.code == 0) {
							_this.lists = res.data.paiban_list;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'error'
							})
						}
					},
					(e) => {
						uni.showToast({
							title: '网络请求错误，请稍后重试',
							icon: 'error'
						})
					})
			},
			change: function(e) {
				if (e.length >= this.lists.length) {
					this.selectBtn[0].title = "取消";
					this.selectBtn[0].checked = true;
				} else {
					this.selectBtn[0].title = "全选";
					this.selectBtn[0].checked = false;
				}
			},
			btnChange: function(e) {
				var status = false;
				if (e.length > 0) {
					status = true;
					this.selectBtn[0].checked = true;
					this.selectBtn[0].title = "取消";
				} else {
					this.selectBtn[0].checked = false;
					this.selectBtn[0].title = "全选";
				}
				var tmpArr = [];
				this.lists.forEach((item) => {
					item.checked = status;
					tmpArr.push(item);
				});
				this.lists = [];
				this.$nextTick(() => {
					this.lists = tmpArr;
				});
			},
			tijiao: function() {
				let _this = this;
				// 获取选中的数据索引
				var indexs = this.$refs.selectList.getSelectedIndex();
				if (indexs.length < 1) {
					uni.showToast({
						title: "请选择数据",
						icon: "none"
					});
					return;
				}

				var time_option = [];
				_this.choose_val = indexs;
				_this.graceJS.arrayEach(_this.choose_val, (item, index) => {
					console.log(132, item);
					time_option.push(_this.lists[item]);
				});


				_this.graceJS.post(_this.serverUrl + '/api.teacher/set_scheduling', {
						tag: _this.tag,
						time_option: time_option
					},'json', {
						token: _this.token
					}, (res) => {
						if (res.code == 0) {
							uni.navigateTo({
								url: '/pages/assistant/scheduling',
								success: function() {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'error'
							})
						}
					},
					(e) => {
						uni.showToast({
							title: '网络请求错误，请稍后重试',
							icon: 'error'
						})
					})
			}
		}
	}
</script>

<style>
	.footerBtns {
		width: 200rpx;
	}
</style>